<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>商家管理</p>
			<div class="logout-btn" @click="logout">退出</div>
		</header>
		
		<!-- 商家信息部分 -->
		<div class="business-info">
			<div class="info-card">
				<h3>商家信息</h3>
				<div class="info-item">
					<span class="label">商家名称：</span>
					<span class="value">{{ businessInfo.businessName || '未设置' }}</span>
				</div>
				<div class="info-item">
					<span class="label">商家地址：</span>
					<span class="value">{{ businessInfo.businessAddress || '未设置' }}</span>
				</div>
				<div class="info-item">
					<span class="label">商家介绍：</span>
					<span class="value">{{ businessInfo.businessExplain || '未设置' }}</span>
				</div>
				<div class="info-item">
					<span class="label">起送费：</span>
					<span class="value">￥{{ businessInfo.starPrice || '0' }}</span>
				</div>
				<div class="info-item">
					<span class="label">配送费：</span>
					<span class="value">￥{{ businessInfo.deliveryPrice || '0' }}</span>
				</div>
			</div>
		</div>
		
		<!-- 功能菜单部分 -->
		<div class="menu-section">
			<div class="menu-item" @click="manageFood">
				<div class="menu-text">菜品管理</div>
				<div class="menu-arrow">></div>
			</div>
			<div class="menu-item" @click="manageOrders">
				<div class="menu-text">订单管理</div>
				<div class="menu-arrow">></div>
			</div>
		</div>
		
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>
<script>
 import Footer from '../components/Footer.vue';
 
 export default{
	name:'BusinessManager',
	data(){
		return {
			businessInfo: {}
		}
	},
	mounted(){
		this.loadBusinessInfo();
	},
	methods:{
		loadBusinessInfo(){
			// 从session中获取商家信息
			const business = this.$getSessionStorage('business');
			if(business){
				this.businessInfo = business;
			} else {
				// 如果没有登录信息，跳转到登录页
				alert('请先登录！');
				this.$router.push({path:'/login'});
			}
		},
		
		logout(){
			this.$removeSessionStorage('business');
			alert('已退出登录！');
			this.$router.push({path:'/login'});
		},
		
		manageFood(){
			this.$router.push({path:'/foodManager'});
		},
		
		manageOrders(){
			alert('订单管理功能开发中...');
		}
	},
	components:{
		Footer
	}
 }
</script>
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 4vw;
		box-sizing: border-box;
	}

	.logout-btn {
		font-size: 3.5vw;
		padding: 1vw 2vw;
		background-color: rgba(255,255,255,0.2);
		border-radius: 2vw;
		cursor: pointer;
	}

	/****************** 商家信息部分 ******************/
	.business-info {
		margin-top: 12vw;
		padding: 4vw;
	}

	.info-card {
		background-color: #fff;
		border-radius: 2vw;
		padding: 4vw;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

	.info-card h3 {
		margin: 0 0 3vw 0;
		font-size: 4vw;
		color: #333;
		text-align: center;
	}

	.info-item {
		display: flex;
		padding: 2vw 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-item .label {
		flex: 0 0 25vw;
		font-size: 3.2vw;
		color: #666;
		font-weight: 700;
	}

	.info-item .value {
		flex: 1;
		font-size: 3.2vw;
		color: #333;
	}

	/****************** 功能菜单部分 ******************/
	.menu-section {
		padding: 0 4vw 15vw 4vw;
	}

	.menu-item {
		background-color: #fff;
		margin-bottom: 2vw;
		border-radius: 2vw;
		padding: 4vw;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.menu-item:hover {
		background-color: #f8f8f8;
	}

	.menu-text {
		flex: 1;
		font-size: 3.8vw;
		color: #333;
		font-weight: 600;
	}

	.menu-arrow {
		font-size: 4vw;
		color: #ccc;
	}
</style> 